<script setup lang="ts" >
import {
    Menu as IconMenu,
    House,
    Aim,
    MessageBox,
    Message,
    Edit,
    Pointer,
    View,
    Tools,
    ArrowDown,
    FullScreen,
    Share
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/userinfo.js'
const router = useRouter()
const goLogin = () => {
    router.push('/login')
}
//全屏显示
const openfullScreen = () => {
    let full = document.fullscreenElement
    if (!full) {
        document.documentElement.requestFullscreen()
    } else {
        document.exitFullscreen()
    }
}
//展示头像
import { useUserStore } from '@/store/userinfo.js'

const userStore = useUserStore()

// import { useCssVar } from '@vueuse/core'

// const changeSize = (num) => {
//     const color = useCssVar('--color')
//     color.value = num
// }
</script>

<template>
    <div class="common-layout">
        <el-container>
            <!-- 侧边 -->
            <el-aside width="200px" ref="aelside">
                <el-menu class="el-menu-vertical-demo" router>
                    <div class="title">数据展示平台</div>
                    <el-menu-item index="home">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="overview">
                        <el-icon><icon-menu /></el-icon>
                        <span>系统概览</span>
                    </el-menu-item>
                    <!-- 用户管理 -->
                    <el-sub-menu index="product">
                        <template #title>
                            <el-icon>
                                <Aim />
                            </el-icon>
                            <span>用户管理</span>
                        </template>
                        <!-- 组 -->
                        <el-menu-item-group title="管理员管理">
                            <el-menu-item index="product">产品管理员</el-menu-item>
                            <el-menu-item index="user">用户管理员</el-menu-item>
                            <el-menu-item index="message">消息管理员</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="员工管理">
                            <el-menu-item index="userlist">用户列表</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <!--  -->
                    <!-- 产品管理 -->
                    <el-sub-menu index="product_manage_list">
                        <template #title>
                            <el-icon>
                                <MessageBox />
                            </el-icon>
                            <span>产品管理</span>
                        </template>
                        <el-menu-item-group title="管理员管理">
                            <el-menu-item index="product_manage_list">产品列表</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="用户管理">
                            <el-menu-item index="out_product_manage_list">出库列表</el-menu-item>
                        </el-menu-item-group>

                    </el-sub-menu>
                    <!-- 消息管理 -->
                    <el-sub-menu index="5">
                        <template #title>
                            <el-icon>
                                <Message />
                            </el-icon>
                            <span>消息管理</span>
                        </template>
                        <el-menu-item-group title="消息管理">
                            <el-menu-item index="5-1">消息列表</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="回收站">
                            <el-menu-item index="5-2">回收站</el-menu-item>
                        </el-menu-item-group>

                    </el-sub-menu>
                    <!-- 合同管理 -->
                    <el-menu-item index="6">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <span>合同管理</span>
                    </el-menu-item>
                    <!-- 操作日志 -->
                    <el-menu-item index="operation_log">
                        <el-icon>
                            <Pointer />
                        </el-icon>
                        <span>操作日志</span>
                    </el-menu-item>
                    <!-- 登录日志 -->
                    <el-menu-item index="login_log">
                        <el-icon>
                            <View />
                        </el-icon>
                        <span>登录日志</span>
                    </el-menu-item>
                    <!-- 系统设置 -->
                    <el-menu-item index="set">
                        <el-icon>
                            <Tools />
                        </el-icon>
                        <span>系统设置</span>
                    </el-menu-item>
                    <!-- 大屏展示 -->
                    <el-menu-item index="screen">
                        <el-icon>
                            <Share />
                        </el-icon>
                        <span>大屏展示</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 顶部tab -->
                <el-header>
                    <span class="header_left">欢迎 <span>{{ userStore.name }}</span> 登录此系统</span>
                    <div class="header_right">
                        <!-- 字体 -->
                        <!-- <div @click="changeSize('red')">11</div> -->
                        <!-- 全屏 -->
                        <el-button szie="small" :icon="FullScreen" circle color="#DFDCDC" @click="openfullScreen">
                        </el-button>
                        <!-- 消息 -->
                        <el-button szie="small" :icon="Message" circle color="#DFDCDC">
                        </el-button>
                        <!-- 头像 -->
                        <el-avatar v-if="userStore.imageUrl" :src="userStore.imageUrl" class="rotateAtar" />
                        <el-avatar v-else src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        <!-- 下拉 -->
                        <el-dropdown>
                            <span class="el-dropdown-link" style="color: aliceblue;">
                                设置
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>设置账号</el-dropdown-item>
                                    <el-dropdown-item divided>更改头像</el-dropdown-item>
                                    <el-dropdown-item divided @click="goLogin">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>
                <!-- router内容 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="scss">
// :root {
//     --color: red;
// }



.el-aside {
    height: 100vh;
    background-color: #2b303b;
    width: 210px;
    //  font-size: var(--size);

    // 隐藏滚动条
    overflow-x: hidden;

    .el-menu {
        background-color: #2b303b;
        width: 210px;
        height: 100px;
    }

    .title {
        color: white;
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .title:hover {
        // transform: translate(10px,20px); //水平垂直移动
        // transform: rotate(30deg);
        // transform-origin: right bottom;
        transform: skew(15deg);
        cursor: pointer;

    }

    .el-menu-item:hover {
        background-color: #020d19;
    }

    .el-menu-item {
        color: white;
    }

    :deep(.el-sub-menu__title) {
        color: white;
    }

    :deep(.el-sub-menu__title:hover) {
        background-color: #021122;
    }

    :deep(.el-menu--inline) {
        background: linear-gradient(60deg, #29323c 0%, #485563 100%);
    }
}

.el-header {
    background: linear-gradient(173deg, #021122 0%, #485563 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    height: 53px;

    .header_left {
        font-family: 'Courier New', Courier, monospace;
        font-size: 18px;
        text-shadow: 0px 0px 10px rgb(128, 178, 195);

        span {
            color: rgb(125, 203, 203);
            text-decoration: wavy underline rgb(0, 128, 98) 2px;
            background-color: #020d19;
            transition: all .5s ease;
        }

        span:hover {
            transform: rotate3d(1, 0, 0, 180deg);
            cursor: pointer;
            font-size: 20px;
            color: rgb(213, 229, 235);
            text-decoration: wavy underline rgb(184, 217, 209) 2px;
        }
    }

    .header_right {
        display: flex;
        align-items: center;
        justify-content: space-around;
        // 左侧占比
        width: 16%;

        .rotateAtar:hover {
            /* transform 属性允许你旋转，缩放，倾斜或平移给定元素 */
            transform: rotate(666turn);
            /* 过渡 */
            transition-delay: 0s;
            transition-property: all;
            transition-duration: 60s;
            transition-timing-function: cubic-bezier(.34, 0, .84, 1);
        }
    }
}

//修改el-main 把边距去掉
:deep(.el-main) {
    padding: 0;
    background-color: rgb(255, 255, 255);
    // color: var(--color);

}
</style>